<template>
  <div class="hello">
    <el-tabs v-model="tabsname" :before-leave="qiehuan">
      <el-tab-pane label="用户管理" name="first">
        用户管理
        <div id="singleChild1"></div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">
        配置管理
      </el-tab-pane>
      <el-tab-pane label="角色管理" name="third">
        角色管理
        <div id="singleChild2"></div>
      </el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import eventRoot from '@/eventRoot'

export default {
  name: 'HelloWorld',
  data () {
    return {
      tabsname: 'second'
    }
  },
  created () {
    eventRoot.$on('goFourth', this.goFourth)
  },
  methods: {
    qiehuan (changeName) {
      if (changeName === 'first') {
        this.$router.push({
          path: '/singleChild1'
        })
      } else if (changeName === 'third') {
        this.$router.push({
          path: '/singleChild2'
        })
      } else if (this.tabsname === 'first' || this.tabsname === 'third') {
        this.$router.push({
          path: '/'
        })
      }
    },
    goFourth () {
      this.qiehuan('fourth')
      this.tabsname = 'fourth'
    }
  }
}
</script>

<style scoped>
.hello {
  text-align: center;
}
</style>
